<template>
  <div class="home">
    <div id="mapChart" class="mapChart"></div>
  </div>
</template>

<script>
import china from '@/assets/js/map/china.json';
import { _debounce } from '@/utils/common.js';

export default {
  name: 'Home',
  data(){
    return {

    }
  },
  methods:{
    drawMapChart(){
      this.myChart = this.$echarts.init(document.getElementById('mapChart'));
      this.$echarts.registerMap('china',china);
      this.myChart.setOption({
        geo: {
          type: "map",
          map: "china",
          roam: true,  // 是否开启鼠标缩放和平移漫游
          label: {
            normal: {
              color: "#000000",
              show: true,
            },
          },
        },
        series: [
          {
            name: "在地图中显示散点图",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: [
              { name: "北京", value: [116.4199, 40.1899] },
              { name: "天津", value: [117.2051, 39.0349] },
              { name: "郑州", value: [113.6654, 34.7579] },
              { name: "武汉", value: [114.3064,30.6167] },
              { name: "南京", value: [118.797, 32.0752] },
              { name: "重庆", value: [106.5560, 29.5940] }, 
              { name: "昆明", value: [102.818, 24.9062] },
              { name: "广州", value: [113.2645, 23.1550] },
            ],
          },
        ],
      });
    },
    // 浏览器窗口大小改变时，重新加载图表以自适应
    resizeCharts:_debounce(function(){
      this.$echarts.init(document.getElementById('mapChart')).resize()
    },500),
  },
  mounted(){
    this.drawMapChart();
    window.addEventListener('resize',this.resizeCharts);
  },
  beforeDestroy() {
    window.addEventListener('resize',this.resizeCharts);
  },
}
</script>

<style lang="scss" scoped>
  #mapChart{
    width: 100%;
    height: 900px;
  }


</style>
